<template>

  <div >
    <strong>智慧校园疫情防控管理系统</strong>

    <div class="header-right">
      <el-avatar
        :src="img"
      ></el-avatar>

      <el-menu
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1">{{UserInfo.username}}</el-menu-item>
        <el-submenu index="2">
          <template slot="title">个人中心</template>
          <router-link to="/home/changeinfo">
            <el-menu-item index="2-1">修改资料</el-menu-item>
          </router-link>
          <el-menu-item index="2-2" @click="logout">退出</el-menu-item>

        </el-submenu>

        <el-menu-item index="3"  @click="open1">消息通知</el-menu-item>


        <el-menu-item index="4">
          <router-link to="/home/author">信息</router-link>
        </el-menu-item>

      </el-menu>



    </div>

  </div>

</template>

<script>
import {request} from '@/axios/request'
import imgUrl from '../../static/image/001.png'
export default {
  name: "Header",
  data(){
      return {
        dialogVisible:false,
        lives:null,
          UserInfo:{
            id:0,
            username:null,
            portrait:null
          },
        img: null
      }
  },
  methods:{


    open1() {
      this.getNew();
    },
    getNew(){
      request({
        url:'/notice/new',
        method:'get'
      }).then(res=>{
        /*this.$notify({
          title: res.data.object[0].title,
          message: '请去公告管理栏查看详情',
          duration: 0
        });*/
        const h = this.$createElement;

        this.$notify({
          title: res.data.object[0].title,
          message: h('i', { style: 'color: teal'}, '详情请去公告管理栏查看')
        });
      })

    },
    open2() {

    /*  request({
        url:'/',
        method:'get'
      }).then(res=>{

      })*/

      this.$notify({
        title: '提示',
        message: '这是一条不会自动关闭的消息',
        duration: 0
      });
    }
    ,
      getUserInfo(){
          request({
              url:'/user',
              method:'get'
          }).then(res=>{
              this.UserInfo.id=res.data.object.id;
              this.UserInfo.username=res.data.object.username;
              this.UserInfo.portrait=res.data.object.avatar;
              console.log(res.data.object.avatar);


          })
      },
      logout(){
        request({
          url:'logout',
          method:'post',
        }).then(res=>{
          this.$message({
                message:res.data.Msg,
                type:'success'
                })
          localStorage.clear()
					sessionStorage.clear()

					this.$store.commit("resetState")

					this.$router.push("/login")
        })

  }},
  created(){
      this.getUserInfo()


      this.getNew();

     this.img = imgUrl;
  },


};
</script>

<style scoped>
.el-menu-demo {
  background-color: #b3c0d1;
}
.header-right {
  float: right;
  width: 450px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
